<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.kdniao.com/OutDemo/KDNWidget/KDNWidget.css"/>

</head>
<style>
    .spacing {
        margin-bottom: -36px;
    }
    .attach-img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        border-radius: 3px;
        height: 200px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>收货单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form label-width="100px">
            <#--<el-card class="box-card">-->
            <#--<span style="color:#43515a;font-family: PingFang SC">订单信息</span>-->
            <#--<el-row >-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">收货单号：<span style="color:#527c94cc" v-if="orderBill_id != 'null'">{{orderBill_id}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--&lt;#&ndash;<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">&ndash;&gt;-->
            <#--&lt;#&ndash;<h5 style="color: #909399">收货单名称：<span style="color:#527c94cc">{{orderBill_id}}</span></h5>&ndash;&gt;-->
            <#--&lt;#&ndash;</el-col>&ndash;&gt;-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">收货人：<span style="color:#527c94cc" v-if="consignee_information != 'null'">{{consignee_information}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">收货地址：<span style="color:#527c94cc" v-if="address != 'null'">{{address}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">创建时间：<span style="color:#527c94cc" v-if="crtTime != 'null'">{{crtTime}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">订单总额：<span style="color:#527c94cc" v-if="price != 'null'">{{price}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
            <#--<h5 style="color: #909399">描述：<span style="color:#527c94cc" v-if="remark != 'null'">{{remark}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
            <#--</el-col>-->
            <#--</el-row>-->
            <#--</el-card>-->
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">供方信息</span>
                    <el-row>
                    <#--金蝶没有该字段-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货单名称：<span style="color:#527c94cc" >金蝶没有该字段</span></h5>-->
                    <#--</el-col>-->

                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">收货单号：<span style="color:#527c94cc" v-if="orderBill_id != 'null'">{{orderBill_id}}</span>
                            </h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">联系人：<span style="color:#527c94cc">{{supply_user}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">发货方：<span style="color:#527c94cc">上海品宅装饰科技有限公司</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">备注：<span style="color:#527c94cc">{{remark}}</span></h5>
                        </el-col>

                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货人：<span style="color:#527c94cc" v-if="delivery_name != 'null'">{{delivery_name}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">联系方式：<span style="color:#527c94cc" v-if="delivery_phone != 'null'">{{delivery_phone}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--金蝶没有该字段-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货金额：<span style="color:#527c94cc" >金蝶没有该字段</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">预计到货时间：<span style="color:#527c94cc" v-if="arriveTime != 'null'">{{arriveTime}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">备注：<span style="color:#527c94cc" v-if="remark != 'null'">{{remark}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">客户信息</span>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">收货人：<span
                                    style="color:#527c94cc">{{consignee_name}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">收货地址及联系方式：<span
                                    style="color:#527c94cc">{{consignee_address}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">项目名称：<span style="color:#527c94cc">{{project_name}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">客户名称：<span
                                    style="color:#527c94cc">{{userGroup_name}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                </el-card>
            <#--<el-card class="box-card">-->
            <#--<span style="color:#43515a;font-family: PingFang SC">收货信息</span>-->
            <#--<el-row :gutter="20">-->
            <#--<el-col :span="8" class="spacing">-->
            <#--<h5 style="color: #909399">收货人：<span style="color:#527c94cc">{{delivery}}</span></h5>-->
            <#--</el-col>-->
            <#--</el-row>-->
            <#--<el-row :gutter="20">-->
            <#--<el-col :span="8" class="spacing">-->
            <#--<h5 style="color: #909399">收货地址：<span style="color:#527c94cc">{{address}}</span></h5>-->
            <#--</el-col>-->
            <#--</el-row>-->
            <#--<el-row :gutter="20">-->
            <#--<el-col :span="8" class="spacing">-->
            <#--<h5 style="color: #909399">联系电话：<span style="color:#527c94cc">{{contact}}</span></h5>-->
            <#--</el-col>-->
            <#--</el-row>-->
            <#--<el-row :gutter="20">-->
            <#--<el-col :span="8" class="spacing">-->
            <#--<h5 style="color: #909399">公司名称：<span style="color:#527c94cc">{{userGroup_name}}</span></h5>-->
            <#--</el-col>-->
            <#--</el-row>-->
            <#--</el-card>-->
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="物流信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                    <div id="wuliu"></div>
                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="附件" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-row :gutter="20">
                <el-col :xs="12" :sm="8" :md="4" :lg="3" :xl="3" v-for="(attach,i) in attachmentArr">
                    <a v-bind:href="attach" target="_blank">
                    <el-card :body-style="{ padding: '0px' }" >
                        <img class="attach-img" v-bind:src="attach" >
                    </el-card>
                    </a>
                </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="收单明细" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>

                <el-table :data="tableData"
                          class="tb-edit"
                          style="width: 100%" highlight-current-row @row-click="handleCurrentChange" size="mini"
                          tooltip-effect="dark" border>
                    <el-table-column label="序号"
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column label="收货单编码" prop="orderBill_id" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.orderBill_id" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料编码" prop="skuCode" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuCode" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料名称" prop="skuName" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuName" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="skuBrand" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuBrand" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单位" prop="skuUnit" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuUnit"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="型号" prop="skuModel" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuUnit"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单价" prop="sku_contract_price" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuPrice"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="预计到货时间" prop="arriveTime" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuPrice"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>

                <#--<el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>-->
                <#--<template scope="scope">-->
                <#--<el-input size="small" v-model="scope.row.sku_slug_set" :disabled="true"></el-input>-->
                <#--</template>-->
                <#--</el-table-column>-->
                    <el-table-column label="应收数量" prop="purNum" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.purNum"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="已收数量" prop="sendNum" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sendNum"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sendNum"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="收货说明" prop="receiving_remark" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.purNum" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                </el-table>
                <br><br>
                <el-form-item>
                </el-form-item>
                <el-form-item>
                    <a href="/order/consignee.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</div>
</body>
</html>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script src="/js/KDNWidget.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                attachmentArr: [],
                attachment: "",
                order_name: "",
                orderBill_id: "${orderNo}",
                crtTime: "",
                price: "",
                user_id: "",
                remark: "",
                consignee_name: "",
                consignee_address: "",
                contact: "",
                userGroup_name: "",
                userGroup_id: "",
                supply_user: '',
                project_name: '',
                consignee_information: '',
                tableData: [],
                response_data: "",
                sku_sum_price: 0,
                freight: 0,//运费价格
                sales_order_price: 0,
                //当前页
                currentPage: 1,
                //每页数量
                pagesize: 10,
                //总页数
                total: "",
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pagesize = val;
            },
            CurrentChange(val) {
                this.currentPage = val;
            },
            handleCurrentChange(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            ajaxFunction() {
                var resultData = "";
                var bool = false;
                $.ajax({
                    url: '/order/billDetail.json',
                    type: 'POST',
                    data: {orderNo: "${orderNo}", type: 23},
                    // contentType: "application/json",
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.ret) {
                            bool = true;
                            resultData = result.data;//数据记录
                        }
                    }
                });
                if (bool) {
                    this.showDetailMsg(resultData);
                } else {
                    this.$alert('系统异常点击确定返回列表页。', '信息框', {
                        confirmButtonText: '确定',
                        showClose: false,
                        callback: action => {
                            window.history.back(-1);
                        }
                    });
                }

            },
            showDetailMsg(resultData) {
                this.response_data = resultData;
                // var arr = JSON.parse(resultData.context);
                // var mapData = new HashMap();
                // for (var i = 0; i < arr.length; i++) {
                //     var obj = arr[i];
                //     if (1 == obj.orderBill_value_type) {//单属性
                //         mapData.put(obj.templateProperty_alias, null == obj.orderBill_value ? "" : obj.orderBill_value);
                //     } else if (2 == obj.orderBill_value_type) {
                //         var arr_i = new Array();
                //         var arr_line = JSON.parse(obj.orderBill_value);
                //         for (var j = 0; j < arr_line.length; j++) {
                //             var acr = arr_line[j];
                //             var map_line = new HashMap();//一行的Map
                //             for (var k = 0; k < acr.length; k++) {
                //                 var jgfhj = acr[k];
                //                 map_line.put(jgfhj.templateProperty_alias, null == jgfhj.orderBill_value ? "" : jgfhj.orderBill_value);
                //             }
                //             arr_i.push(map_line);
                //         }
                //         mapData.put(obj.templateProperty_alias, arr_i);
                //     }
                // }
                // this.order_name = mapData.get("order_name");
                this.orderBill_id = resultData.orderBill_id;
                this.crtTime = resultData.crtTime;
                this.price = resultData.price;
                this.project_name = resultData.project_name;
                this.supply_user = resultData.supply_user;
                this.userGroup_id = resultData.userGroup_id;
                this.transport_company = resultData.transport_company;
                this.transport_billNo = resultData.transport_billNo;
                // this.user_id = mapData.get("user_id");
                // this.remark = mapData.get("remark");
                this.consignee_information = resultData.consignee_information;
                this.consignee_address = resultData.consignee_address;
                this.consignee_name = resultData.consignee_name;
                this.freight = resultData.transport_price;
                this.remark = resultData.remark;
                this.attachment = resultData.attachment;
                // this.contact = mapData.get("consignee_phone");
                var orderDetailList = resultData.context;
                console.log(resultData.context);

                var arr_table = new Array();
                for (var i = 0; i < orderDetailList.length; i++) {
                    var map = orderDetailList[i];
                    var obj_table = new Object();
                    obj_table.orderBill_id = resultData.orderBill_id;
                    obj_table.skuCode = map.sku_code;
                    obj_table.skuName = map.sku_name;
                    obj_table.skuBrand = map.sku_brand;
                    obj_table.skuModel = map.sku_model;
                    obj_table.skuUnit = map.sku_unit;
                    obj_table.sku_slug_set = map.sku_slug_set;
                    obj_table.arriveTime = map.arriveTime;
                    // obj_table.skuPrice =map.sku_price;
                    obj_table.purNum = map.purNum;
                    obj_table.sendNum = map.sendNum;
                    // obj_table.supplyCycle = map.supplyCycle;
                    obj_table.sku_contract_price = map.sku_contract_price;
                    obj_table.sku_remark = map.sku_remark;
                    obj_table.receiving_remark = map.receiving_remark;
                    arr_table.push(obj_table);
                }
                var transport_company = this.transport_company;
                var transport_billNo = this.transport_billNo;
                this.tableData = arr_table;
                var json = "";
                var boolean = false;
                if (transport_billNo != "") {
                    $.ajax({
                        url: '/order/logistics.json',
                        type: 'get',
                        data: {no: transport_billNo},
                        // contentType: "application/json",
                        async: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.ret) {
                                boolean = result.ret;
                                json = result.data;
                            }
                        }
                    });
                    if (boolean) {
                        transport_company = json;
                    }
                }
                window.onload = function () {
                    KDNWidget.run({
                        serviceType: "B",
                        expCode: transport_company,
                        expNo: transport_billNo,
                        showType: "normal",
                        container: "wuliu"
                    })
                }
            },
            getCompanyName() {
                $.ajax({
                    url: '/company/detail.json?id=' + this.userGroup_id,
                    type: 'get',
                    // contentType: "application/json",
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.userGroup_name = result.data.company_name;
                        } else {
                            this.userGroup_name = "未获取到客户信息";
                        }
                    }
                });
            }
        },
        /** 初始化参数的时候使用 */
        async mounted() {
            this.ajaxFunction();
            var att = this.attachment.substr(0, this.attachment.length);
            att.split(",").forEach((ele) => {
                if (!ele == "") {
                    this.attachmentArr.push(ele);
                }
            })
            this.getCompanyName();
        }
    });

</script>


